<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>动态</title>
<link rel="icon" href="http://glorywebsdemo.com/themeforest/html/carveordering/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/css/bootstrap.min.css" />

<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/menu.css" />
<link href="/css/style2.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="/css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/xcConfirm.css"/>
<style>
li {
	list-style-type: none;
}

.mydiv:hover {
	width: 250px;
	height: auto;
	border: #909090 1px solid;
	background: #fff;
	color: #333;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,
		direction=120, strength=4);
	-moz-box-shadow: 2px 2px 10px #909090;
	-webkit-box-shadow: 2px 2px 10px #909090;
	box-shadow: 2px 2px 10px #909090;
}

a {
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

a:link, a:visited {
	text-decoration: none; /*超链接无下划线*/
}

.fd_class:hover{
	background-color: #ff18001f;
}

.left_col{
	height:auto;
	min-height:800px;
	background-color: #fff;
	/* border: #909090 1px solid; */
	margin:2px 12px 10px 30px;
}

.right_col{
	height:auto;
	min-height:800px;
	background-color: #fff;
/* 	border: #909090 1px solid; */
	margin:2px 12px 10px 12px;
}

@media (max-width: 767px) {
	.left_col{
		height:auto;
		min-height:auto;
	}
	
	.right_col{
		height:auto;
		min-height:auto;
	}
}

</style>
</head>

<body>

	<div class="container" style="padding: 0; margin-top: 0; background-color: EBEBEB;">
		<div class="container-fluid main-content" style="margin-bottom: 4px; padding: 0;">
			<!--
                	作者：2539829814@qq.com
                	时间：2020-03-12
                	描述：网站头
                -->
			<div class="header">
				<div class="logo">
					<img th:src="${session.user.iconUrl}" style="float: left; padding: 5px; width: 45px; height: 45px; border-radius: 50%;" />
					 <a href="#" style="float: left;">
						<h1>好友动态</h1>
					</a>
					
				</div>
				<div class="search">
					<div class="search2">
						<form>
							<i class="fa fa-search"></i> <input type="text" value="Search for a movie" onFocus="this.value = '';"
								onBlur="if (this.value == '') {this.value = 'Search for a movie, play, event, sport or more';}" />
						</form>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>


			<!--
                	作者：2539829814@qq.com
                	时间：2020-03-12
                	描述：导航
                -->
			<div class="bootstrap_container">
				<nav class="navbar navbar-default w3_megamenu" role="navigation">
					<div class="navbar-header">
						<button type="button" data-toggle="collapse" data-target="#defaultmenu" class="navbar-toggle">
							<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
						</button>
						<a href="#" class="navbar-brand"><i class="fa fa-home"></i></a>

					</div>
					<!-- end navbar-header -->

					<div id="defaultmenu" class="navbar-collapse collapse">
						<ul class="nav navbar-nav">
							<li data-toggle="tab" class="active"><a id="fdAllButton" href="#">视频</a></li>
							<li data-toggle="tab"><a id="fdVideoButton" href="#">好友</a></li>
						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li class="dropdown" data-toggle="tab"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span
									title="设置" class="glyphicon glyphicon-cog"></span></a>
								<ul class="dropdown-menu mytab">
									<li data-toggle="tab" class="dropdown-header">设置中心</li>
									<li data-toggle="tab"><a id="reload" href="#">页面刷新</a></li>
									<li data-toggle="tab"><a href="#">安全退出</a></li>
									<li data-toggle="tab"><a href="#">账号注销</a></li>
								</ul></li>
						</ul>
					</div>
					<!--/.nav-collapse -->
					</nav>
			</div>

			<div class="container" style="border: rgba(0, 0, 0, .125) solid 1px;">


				<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示全部
                -->
				<div class="container-fluid row p_card" id="fdAllPage">
					
				</div>

				<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示视频
                -->
				<div class="container row p_card" id="fdVideoPage">
					<div class="container-fluid col-lg-3 left_col" id="friendsList">
					
						<!-- <div class="container-fluid fd_class" style=" border: rgba(0,0,0,.125) solid 1px; padding:3px 8px; margin:4px 0px;">
							<div style="position:relative; float:left; display: flex;flex-direction:row; " >
								<img  style="width:40px; height:40px; border-radius:50%;" src="/img/LCM.jpg"/>						
								<div style="position:relative; left:8px; top: 4px;">
									<div style="font-size: 15px;">测试用户</div>
									<div style="font-size: 10px;">2020-02-01 </div>												
								</div>
							</div>
							
							<div style="color:#007dd3; position:relative; float:right;top: 4px; margin:4px 0;padding:2px 10px;cursor: pointer;text-decoration: none;">取消关注</div>						
						</div> -->
						
						
					</div>
					
					<div class="container-fluid col-lg-8 right_col" id="fdvideo">
					<div>
						<h1 style="text-align: center;position:relative; top:40px;">点击左(或上)侧列表，显示视频！</h1>
					</div>
						
					</div>
				</div>

				<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示图片
                -->
				<div class="container row p_card" id="fdImgPage"></div>

			</div>

		</div>



		<script src="/js/jquery.min.js"></script>
		<!-- include flowplayer -->
		<script src="/js/flowplayer.min.js"></script>

		<script src="/js/bootstrap.min.js"></script>
		<script src="/js/common.js" type="text/javascript"></script>
		<script src="/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/home.js"></script>
		<script type="text/javascript">
			$('#reload').click(function() {
				window.location.reload();
			});

			var fdAllPage_signal = false;

			function operateAjax(url, videoId) {
				$.ajax({
					url : url,
					async : true,
					type : "post",
					data : {
						"videoId" : videoId
					},
					dataType : "JSON",
					error : function() {
						alert("失败1");
					},
					success : function(data) {
						//alert("操作成功"+data.message);
					}
				});
			}

			function myAjax(url, idName, id_identify_prefix, type) {
				$.ajax({
					url : url,
					async : true,
					type : "get",
					dataType : "JSON",
					error : function() {
						alert("失败2");
					},
					success : function(data) {
						$.each(data.data, function(i, val) {
							var div1 = $('<div id="videoId'+id_identify_prefix+val.videoId+'" style="margin-bottom:40px;" class="col-lg-3 "/>');

							var ul = $('<ul style="padding:0;margin:0;"/>');
							ul.appendTo(div1);

							var li = $('<li style="margin:0;"/>');
							li.appendTo(ul);

							var div2 = $('<div class="card mydiv" style="width:100%; border: rgba(0,0,0,.125) solid 1px ;"/>');
							div2.appendTo(li);

							var li0 = $('<li style="margin:4px 0;"/>');
							li0.appendTo(div2);

							var divo = $('<div style="width:100%;display: flex;flex-direction:row;"/>');

							divo.appendTo(li0);

							var img0 = $('<img  style="width:50px; height:50px; border-radius:50%;" />');
							img0.attr("src", this.user.iconUrl);
							img0.appendTo(divo);

							var div00 = $('<div style="font-size: 24px;font-family:'+'仿宋'+';margin: auto 10px;"/>');
							div00.appendTo(divo);
							div00.text(this.user.userName);

							var div21 = $('<div class="C_img" style="width:100%;"/>');
							div21.appendTo(div2);

							var img = $('<img style="width:100%;" class="absoImg" alt=""/>');
							img.appendTo(div21);
							img.attr("src", this.thumbnailUrl);

							var div22 = $('<div class="container-fluid" style="padding:2px 5px;"/>');
							div22.appendTo(div2);

							var h4 = $('<h4 class="title"/>');
							h4.appendTo(div22);
							h4.html("主题：" + this.videoTitle);

							var p = $('<p class="desc"/>');
							p.appendTo(div22);
							p.html("描述：" + this.videoInfo.substring(0, 17) + "...");

							var div221 = $('<div class="containe-fluidr" style="padding:8px 0 ;"/>');
							div221.appendTo(div22);

							var div2211 = $('<div class="" style="float:left;"/>');
							div2211.appendTo(div221);
							var date = (new Date(this.editDate)).Format("yyyy-MM-dd hh:mm:ss");
							div2211.html("日期：" + date);

							var div2212 = $('<div class="dropup " style="float:right; border: rgba(0,0,0,.125) solid 1px;margin:0 0 4px 0;">');
							div2212.appendTo(div221);


							//操作下拉框
							var ul1 = $(' <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"/>');
							ul1.appendTo(div2212);

							div1.appendTo(idName);

							img.click(function() {
								window.open("/VideoController/videoPlay?videoId=" + val.videoId);
							});
						});
					}
				})
			}

			$(document).ready(function() {
				$("#fdAllPage").show();
				$("#fdVideoPage").hide();
				myAjax("/VideoController/focusedVideoListByAjax", "#fdAllPage", "fdAllPage", null);
				fdAllPage_signal = true;
			});
			$("#fdAllButton").click(
				function(){
					$("#fdAllPage").show();
					$("#fdVideoPage").hide();
				}		
			);
			
			var fdVideo_signal = false;
			$("#fdVideoButton").click(
				function(){
					$("#fdAllPage").hide();
					$("#fdVideoPage").show();
					if(fdVideo_signal == false){
						myFriends("/FocusController/focusedListByAjax",'#friendsList','fd',null)
						
						fdVideo_signal = true;
					}			
				}		
			);
			
			function myFriends(url, idName, id_identify_prefix, type) {
				$.ajax({
					url : url,
					async : true,
					type : "get",
					dataType : "JSON",
					error : function() {
						alert("失败2");
					},
					success : function(data) {
						$.each(data.data, function(i, val) {		
							
							var userId = this.userId;
							var fdId = id_identify_prefix+this.userId;
							
							var div0=$('<div class="container-fluid fd_class" id="'+fdId+'" style=" border: rgba(0,0,0,.125) solid 1px; padding:3px 8px; margin:4px 0px;"/>');
							
							var div01=$('<div style="position:relative; float:left; display: flex;flex-direction:row; " />');
							div01.appendTo(div0);
							
							var img=$('<img  style="width:40px; height:40px; border-radius:50%;"/>');
							img.attr("src", this.iconUrl);
							img.appendTo(div01);
							
							var div011=$('<div style="position:relative; left:8px; top: 4px;"/>');
							div011.appendTo(div01);
							
							var div0111=$('<div style="font-size: 15px;" />');
							div0111.appendTo(div011);
							div0111.html(this.userName);
							
							var div0112=$('<div style="font-size: 10px;" />');
							div0112.appendTo(div011);
							var date = (new Date(this.registerDate)).Format("yyyy-MM-dd hh:mm:ss");
							div0112.html(date);
							
							var div02=$('<div style="color:#007dd3; position:relative; float:right;top: 4px; margin:4px 0;padding:2px 10px;cursor: pointer;text-decoration: none;"/>');
							div02.html("取消关注");
							div02.appendTo(div0);
							
							div02.click(
								function(){
									window.wxc.xcConfirm("本系统暂不支持该功能", window.wxc.xcConfirm.typeEnum.warning);
								}		
							);
							
							div0.appendTo($('#friendsList'));
							
							$('#'+fdId).click(
								function(){
									$("#fdvideo").empty();
									myAjax2("/VideoController/getVideoListByUserIdAjax", "#fdvideo", "fdvideo", null, userId);
								}							
							);
							
						});
					}
				})
			}
			
			
			function myAjax2(url, idName, id_identify_prefix,type,parameter) {
				$.ajax({
					url : url,
					async : true,
					type : "get",
					data:{"userId":parameter},
					dataType : "JSON",
					error : function() {
						alert("失败2");
					},
					success : function(data) {
						$.each(data.data, function(i, val) {
							var div1 = $('<div id="videoId'+id_identify_prefix+val.videoId+'" style="margin-bottom:40px;" class="col-lg-4 "/>');

							var ul = $('<ul style="padding:0;margin:0;"/>');
							ul.appendTo(div1);

							var li = $('<li style="margin:0;"/>');
							li.appendTo(ul);

							var div2 = $('<div class="card mydiv" style="width:100%; border: rgba(0,0,0,.125) solid 1px ;"/>');
							div2.appendTo(li);

							var li0 = $('<li style="margin:4px 0;"/>');
							li0.appendTo(div2);


							var div21 = $('<div class="C_img" style="width:100%;"/>');
							div21.appendTo(div2);

							var img = $('<img style="width:100%;" class="absoImg" alt=""/>');
							img.appendTo(div21);
							img.attr("src", this.thumbnailUrl);

							var div22 = $('<div class="container-fluid" style="padding:2px 5px;"/>');
							div22.appendTo(div2);

							var h4 = $('<h4 class="title"/>');
							h4.appendTo(div22);
							h4.html("主题：" + this.videoTitle);

							var p = $('<p class="desc"/>');
							p.appendTo(div22);
							p.html("描述：" + this.videoInfo.substring(0, 17) + "...");

							var div221 = $('<div class="containe-fluidr" style="padding:8px 0 ;"/>');
							div221.appendTo(div22);

							var div2211 = $('<div class="" style="float:left;"/>');
							div2211.appendTo(div221);
							var date = (new Date(this.editDate)).Format("yyyy-MM-dd hh:mm:ss");
							div2211.html("日期：" + date);

							var div2212 = $('<div class="dropup " style="float:right; border: rgba(0,0,0,.125) solid 1px;margin:0 0 4px 0;">');
							div2212.appendTo(div221);

					

							//操作下拉框
							var ul1 = $(' <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"/>');
							ul1.appendTo(div2212);

							div1.appendTo(idName);

							img.click(function() {
								window.open("/VideoController/videoPlay?videoId=" + val.videoId);
							});
						});
					}
				})
			}

		</script>
		</div>
</body>

</html>